<div class="page-container" v-cloak>
    <el-card>

        <template #header>
            <div class="breadcrumb" style=" overflow: hidden;">
                <el-breadcrumb separator="/" style=" float: left;  ">
                    <el-breadcrumb-item><a href="{:url('admin/viporder/index')}">订单列表</a></el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style=" float: right;  ">
                    <el-button type="primary" @click="refresh()">刷新</el-button>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form :inline="true">
                <el-form-item>
                    <el-select filterable  v-model="where.store_id" placeholder="所属门店">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="(item,index) in store_list" :value="index"
                                   :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="where.order_on" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="where.user_id" placeholder="用户ID" style="width: 100px"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker
                            v-model="where.add_time"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="下单开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="where.end_time"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="下单结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-link>
                        <el-button type="primary" @click="searchEvent">查询</el-button>
                    </el-link>
                    <!--                    <el-link href="{:url('admin/viporder/edit')}">-->
                    <!--                        <el-button type="primary">新增</el-button>-->
                    <!--                    </el-link>-->
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table

                    :data="data_list"
                    style="width: 100%">
                <el-table-column
                        prop="order_id"
                        label="ID"
                        min-width="40">
                </el-table-column>
                <el-table-column
                        prop="store_name"
                        label="店铺名称"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="vip_name"
                        label="包厢名称"
                        min-width="70">
                </el-table-column>

                <el-table-column
                        prop="price"
                        min-width="70"
                        label="充值金额">
                </el-table-column>
                <el-table-column label="订单类型" min-width="100">
                    <template v-slot:default="scope">
                        <!-- 使用 scope.row 来访问当前行的数据 -->
                        <span v-if="scope.row.order_type === 1">活动充值</span>
                        <span v-else style="color: #529b2e">自定义充值</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user_id"
                        min-width="60"
                        label="用户ID">
                </el-table-column>


                <el-table-column label="支付方式">
                    <template v-slot:default="scope">
                        <!-- 使用 scope.row 来访问当前行的数据 -->
                        <span v-if="scope.row.pay_type === 1" style="color: #529b2e">微信支付</span>
                        <span v-else>余额支付</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template v-slot:default="scope">
                        <!-- 使用 scope.row 来访问当前行的数据 -->
                        <span v-if="scope.row.status === 6" style="color: #d51a35">未付款</span>
                        <span v-if="scope.row.status === 5" style="color: #24d314">已分账</span>
                        <span v-if="scope.row.status === 0" style="color: #7a8077">未开始</span>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" min-width="130">
                    <template v-slot:default="scope">
                        <!-- 使用 scope.row 来访问当前行的数据 -->
                        <span style="color: #529b2e">{{scope.row.created_at}}</span></p>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="order_on"
                        min-width="160"
                        label="订单号码">
                </el-table-column>
                <el-table-column
                        align="center"
                        min-width="180"
                        label="操作">
                    <template v-slot:default="scope">
                        <el-link v-if="scope.row.status === 0||scope.row.status === 1">
                            <el-button @click="cancelorder(scope.row.order_id)" type="primary">取消订单</el-button>
                        </el-link>
                        <el-link
                                v-if="scope.row.status === 0||scope.row.status === 1||scope.row.status === 2||scope.row.status === 5">
                            <el-button @click="refundorder(scope.row.order_id)" type="danger">取消并退款</el-button>
                        </el-link>
                        <el-link v-else>
                            无
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total_num"
                        :current-page="current_page"
                        :page-size="per_page"
                        @current-change="currentChangeEvent"
                >
                </el-pagination>
            </div>
        </div>
    </el-card>
</div>

<script>
    const App = {
        data() {
            return {
                is_init_list: true,
                store_list: [],
                where: {},
                value1: '',
                isadmin: 0
            }
        },
        methods: {
            GetList() {
                this.httpGet("{:url('admin/viporder/index/lists')}", {
                    page: this.current_page,
                    ...this.where
                }).then(res => {
                    let {lists = {}, store_list = [], isadmin = ''} = res.data
                    this.store_list = store_list
                    this.isadmin = isadmin
                    this.handRes(lists)
                })
            },
            refundorder(order_id) {
                this.$confirm('是否取消订单并退款？', '提示').then(() => {
                    this.httpGet("{:url('admin/viporder/refundorder?order_id=')}" + order_id, {}).then(res => {
                        if (res.status) {
                            this.$message.success(res.msg)
                            this.GetList()
                        }
                    })
                }).catch(err => {
                })
            },
            cancelorder(order_id) {
                this.$confirm('是否取消订单不退款？', '提示').then(() => {
                    this.httpGet("{:url('admin/viporder/cancelorder?order_id=')}" + order_id, {}).then(res => {
                        if (res.status) {
                            this.$message.success(res.msg)
                            this.GetList()
                        }
                    })
                }).catch(err => {
                })
            },
            searchEvent() {
                this.GetList()
            }
        }
    }
</script>